<template>
  <BasicModal @register="register" :title="title" @ok="handleSubmit">
    <!-- <a-button type="primary" @click="closeModal" class="mr-2"> 从内部关闭弹窗 </a-button>
    <a-button type="primary" @click="setModalProps"> 从内部修改title </a-button> -->

    <!-- <div v-if="title == '设定工序单价'" style="margin: 20px 20px 0; text-align: center">
      <a-input v-model:value="value"/>
      <BasicForm @register="registerForm" />
    </div>

    <div v-if="title == '设定工序单价'" style="margin: 20px 20px 0; text-align: center">
      <a-input v-model:value="value"/>
    </div> -->

    <!-- <div v-if="title == '批量添加图纸'" style="margin: 20px 20px 0; text-align: center">
      <a-textarea v-model:value="value" :auto-size="{ minRows: 7, maxRows: 7 }" />
      <p style="color: red; text-align: center; margin-top: 10px">
        提示：请复制EXCEL文件至输入框中。可同时复制图纸信息</p
      >
    </div>

    <div v-else style="margin: 20px 20px 0; text-align: center">
      <a-date-picker v-model:value="value" picker="month" valueFormat="YYYY-MM" />
      <p style="color: red; text-align: center; margin-top: 10px">
        提示：请复制EXCEL文件至输入框中。客户图号+图号+名称+单价。</p
      >
    </div> -->

    <BasicForm @register="registerForm" />
    <p v-if="title == '设定工序单价'" style="color: red; margin-left: 20px">
      提示：请填写工序单价</p
    >
    <p v-if="title == '指定负责人'" style="color: red; margin-left: 20px">
      提示：请填写指定的负责人</p
    >
    <p v-if="title == '截止日期'" style="color: red; margin-left: 20px">
      提示：请填写截止时间批量修改</p
    >
    <p v-if="title == '回复日期'" style="color: red; margin-left: 20px">
      提示：请填写回复时间批量修改</p
    >
  </BasicModal>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'WorkCalendarModal',
    // components: { ADatePicker: DatePicker },
  });
</script>
<script setup lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { officeTreeData } from '/@/api/sys/office';
  import { updateFprice, updateManager, updateHfDate, updateLastDate } from '/@/api/m8/order/order';
  const emit = defineEmits(['success', 'register']);
  const { showMessage } = useMessage();
  // import { DatePicker } from 'ant-design-vue';
  let record = ref<any>();
  const [register, { closeModal, setModalProps }] = useModalInner(async (e) => {
    // , { closeModal, setModalProps }
    value.value = '';
    record.value = e;
    title.value = e.title;
    console.log(e);
    await resetFields();

    let inputFormSchemas: FormSchema[] = [];
    if (e.title == '指定负责人') {
      inputFormSchemas = [
        {
          label: '指定负责人',
          field: 'userCode',
          fieldLabel: 'userName',
          component: 'TreeSelect',
          required: true,
          componentProps: {
            api: officeTreeData,
            params: { isLoadUser: true, userIdPrefix: '', isAll: true },
            canSelectParent: false,
            allowClear: true,
          },
        },
      ];
    }
    if (e.title == '设定工序单价') {
      inputFormSchemas = [
        {
          label: '',
          field: 'fprice',
          component: 'Input',
          componentProps: {
            maxlength: 100,
          },
        },
      ];
    }

    if (e.title == '截止日期') {
      inputFormSchemas = [
        {
          label: '截止日期',
          field: 'lastDate',
          component: 'DatePicker',
          componentProps: {
            format: 'YYYY-MM-DD',
            showTime: false,
          },
          required: true,
        },
      ];
    }
    if (e.title == '回复日期') {
      inputFormSchemas = [
        {
          label: '回复日期',
          field: 'hfDate',
          component: 'DatePicker',
          componentProps: {
            format: 'YYYY-MM-DD HH',
            showTime: { format: 'HH' },
          },
          required: true,
        },
      ];
    }
    setProps({
      labelWidth: 120,
      schemas: inputFormSchemas,
      baseColProps: { lg: 24, md: 24 },
    });
  });
  let title = ref<string>('');
  let value = ref<string>('');

  async function handleSubmit() {
    try {
      const data = await validate();
      console.log(data, '1111');
      setModalProps({ confirmLoading: true });

      // console.log('submit', params, data, record);
      if (title.value == '设定工序单价') {
        const params: any = {
          id: record.value.id,
          ...data,
        };
        const res = await updateFprice(params);
        showMessage(res.message);
      }
      if (title.value == '指定负责人') {
        const params: any = {
          selIds: record.value.id,
          ...data,
        };

        const res = await updateManager(params);
        showMessage(res.message);
      }
      if (title.value == '截止日期') {
        const params: any = {
          selIds: record.value.id,
          ...data,
        };
        const res = await updateLastDate(params);
        showMessage(res.message);
      }
      if (title.value == '回复日期') {
        const params: any = {
          selIds: record.value.id,
          ...data,
        };
        const res = await updateHfDate(params);
        showMessage(res.message);
      }
      setTimeout(closeModal);
      emit('success', data);
    } catch (error: any) {
      if (error && error.errorFields) {
        showMessage('您填写的信息有误，请根据提示修正。');
      }
      console.log('error', error);
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
  const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useForm();
</script>
<style  scoped>
  .ant-picker {
    width: 80%;
  }
</style>
